<template>
  <view class="container">
    <view class="back"></view>
    <kt-nav-bar
        :icon="$kt.file.byPath('tabbar/message-selected.svg')"
        :title="$i18n.zhToGlobal('消息')"></kt-nav-bar>

    <view
        v-if="loading" class="loading-box">
      <image
              mode="widthFix"
              class="loading-icon"
              :src="$kt.file.byPath('tabbar/message-selected.svg')"></image>

    </view>

    <view>
      <view
          v-for="(item,index) in chatDialogList">

      <view
          @click="$kt.router.navTo('/pages/chat/chat?dialogId=' + item.id)"
          class="box">
        <view style="display: inline-block;width: 100rpx;vertical-align: top;position: relative">
          <image
              v-if="item.typeCode==='oneToOne'&&hasAvatar(oneToOneMap[item.id + ''])"
              mode="aspectFill"
              style="border-radius: 55%;width: 100rpx;height: 100rpx"
              :src="$kt.file.visit(oneToOneMap[item.id + ''].fileIdOfAvatar)"></image>

          <image
              v-if="item.typeCode==='oneToOne'&&!hasAvatar(oneToOneMap[item.id + ''])"
              mode="aspectFill"
              style="border-radius: 55%;width: 100rpx;height: 100rpx"
              :src="$kt.file.byPath('image/logo.png')"></image>

          <view
              class="unread-count"
              v-if="item.unreadCount&&item.unreadCount>0"
          >
            {{ item.unreadCount }}
          </view>
        </view>
        <view style="display: inline-block;width: calc(100% - 150rpx);margin-left: 20rpx;">
          <view class="title"
                style="position: relative"
                v-if="item.typeCode==='oneToOne'">
            <text
                v-if="hasNickname(oneToOneMap[item.id + ''])"
            >
              {{ oneToOneMap[item.id + ""].nickname }}
            </text>
            <text v-else>{{ $i18n.zhToGlobal("对方未设置昵称") }}</text>
            <view class="grid-tips"
                  v-if="item.gmtLastContent"
                  style="position: absolute;right:0;top:-10rpx;">
              {{ $kt.date.format(item.gmtLastContent, 'yyyy-MM-dd hh:mm:ss') }}
            </view>
          </view>
          <view>

            <view
                v-if="item.lastContentTypeCode==='text'"
                class="content">
              {{ item.lastContent }}
            </view>

            <view
                v-if="item.lastContentTypeCode==='fileIdOfImg'"
                class="content">
              <image
                  mode="aspectFill"
                  style="width: 100rpx;height: 100rpx;border-radius: 10rpx;"
                  :src="$kt.file.visit(item.lastContent)"></image>
            </view>

            <view
                v-if="item.lastContentTypeCode==='fileIdOfVoice'"
                class="content">
              [{{ $i18n.zhToGlobal("语音") }}]
            </view>

            <view
                v-if="item.lastContentTypeCode==='fileIdOfVideo'"
                class="content">
              [{{ $i18n.zhToGlobal("视频") }}]
            </view>

            <view
                v-if="item.lastContentTypeCode==='orderId'"
                class="content">
              [{{ $i18n.zhToGlobal("订单") }}]
            </view>

            <view
                v-if="item.lastContentTypeCode==='goodsId'"
                class="content">
              [{{ $i18n.zhToGlobal("商品") }}]
            </view>


          </view>
        </view>

      </view>

      </view>

    </view>

    <no-login></no-login>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      chatDialogList: [],
      oneToOneDialogList: [],
      oneToOneMap: {}
    }
  },
  async mounted() {
    await this.getBySelf();
    setTimeout(()=>{
      this.loading = false;
      this.$forceUpdate();
    },500);
    uni.$on("chat:message:new",(json)=>{
      console.log(json,"chat:message:new");
      for (let i = 0; i < this.chatDialogList.length; i++) {
        if (this.chatDialogList[i].id === json.data.dialogId) {
          this.chatDialogList[i].lastContent = json.data.lastContent;
          this.chatDialogList[i].lastContentTypeCode = json.data.lastContentTypeCode;
          this.chatDialogList[i].gmtLastContent = json.data.gmtLastContent;
          this.chatDialogList[i].unreadCount = json.data.unreadCount;
          console.log(this.chatDialogList[i].unreadCount,"this.chatDialogList[i].unreadCount")
          this.$forceUpdate();
        }
      }
    });
    uni.$on("chat:new",()=>{
      console.log("chat:new")
      this.getBySelf();
    });
  },
  methods: {
    getBySelf() {
      return new Promise((resolve, reject) => {
        this.$kt.request.send({
          uri: '/bus-chat-web/dialog/getBySelf',
          stateSuccess: (res) => {
            this.chatDialogList = res.data;
            for (let i = 0; i < this.chatDialogList.length; i++) {
              if (this.chatDialogList[i].typeCode === 'oneToOne') {
                this.oneToOneDialogList.push(res.data[i]);
              }
            }
            this.getByUserIds();
            resolve();
          },
          stateFail: (res) => {
            console.log(res);
            resolve();
          }
        });
      });

    },
    hasAvatar(item) {
      try {
        return item.fileIdOfAvatar;
      } catch (e) {
        return false;
      }
    },
    hasNickname(item) {
      try {
        return item.nickname;
      } catch (e) {
        return false;
      }
    },
    // /user-account-web/userAccount/getIds
    getByUserIds() {
      let self = this.$kt.userAccount.getSelf();
      console.log(self.id, "self");
      let idMap = {};
      let ids = [];
      for (let i = 0; i < this.oneToOneDialogList.length; i++) {
        let split = this.oneToOneDialogList[i].userAccountIds.split(",");
        for (let j = 0; j < split.length; j++) {
          if (split[j] !== self.id + "") {
            idMap[split[j]] = this.oneToOneDialogList[i].id;
            ids.push(split[j]);
          }
        }
      }
      console.log(idMap, "idMap");

      this.$kt.request.send({
        uri: '/user-account-web/userAccount/getByIds',
        data: {
          ids
        },
        stateSuccess: (res) => {
          console.log(res.data, "res.data");
          for (let i = 0; i < res.data.length; i++) {
            this.oneToOneMap[idMap[res.data[i].id]] = res.data[i];
          }
          this.$forceUpdate();
          console.log(JSON.stringify(this.oneToOneMap), "oneToOneMap");
        },
        stateFail: (res) => {
          console.log(res);
        }
      });
    },

  }
}
</script>

<style lang="scss" scoped>
.back {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #FFFFFF;
  top: 0;
  left: 0;
  z-index: -1;
}

.grid-icon {
  width: 100rpx;
  height: 100rpx;
}

.grid-text {
  text-align: center;
  font-size: 28rpx;
}

.box {
  padding: 20rpx;
  background-color: #FFFFFF;
  margin-top: 20rpx;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .to-more {
    float: right;
    font-size: 24rpx;
    color: #999999;
    font-weight: lighter;
  }

  .grid-icon {
    width: 100rpx;
    height: 100rpx;
  }

  .more-text {
    vertical-align: top;
  }

  .more-icon {
    width: 24rpx;
    height: 24rpx;
    vertical-align: top;
    margin-top: 5rpx;
  }

}

.good-card {
  position: relative;
  background-color: #FFFFFF;
  margin-top: 20rpx;
  border: 1rpx solid #F0F0F0;
  border-radius: 20rpx;
  width: 330rpx;

  .good-image {
    width: 100%;
    border-radius: 20rpx 20rpx 0 0;
    height: 300rpx;
  }

  .good-card-text {
    font-size: 30rpx;
  }

  .good-card-text-box {
    padding: 10rpx;
    box-sizing: border-box;

    .good-card-text {
      // 超出省略号
      overflow: hidden;
      text-overflow: ellipsis;
      // 最多两行
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}

.price {
  font-size: 32rpx;
  color: #FF0000;
  display: inline-block;
}

.grid-tips {
  font-size: 24rpx;
  color: #999999;
  margin-top: 20rpx;
  text-align: left;
}


.cart-icon {
  width: 200rpx;
  height: 200rpx;
  opacity: .3;
}

.btn:active {
  opacity: .8;
}

.tag {
  display: inline-block;
}

.box {
  padding: 20rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #F0F0F0;
}

.box:active {
  opacity: .6;
}

.unread-count {
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #FF0000;
  color: #FFFFFF;
  border-radius: 20rpx;
  padding: 5rpx 10rpx;
  font-size: 24rpx;
}

.loading-box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  z-index: 999;

  .loading-icon{
    animation: loading-icon-ani-in-page-message 1s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 200rpx;
    height: 2000rpx;
  }
}

@keyframes loading-icon-ani-in-page-message {
  0% {
    opacity: .5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: .5;
  }
}
</style>